<template>
	<view class="digital-clock" :style="{color:color}">
		<view class="time-container">
			<view class="time-item" :style="{ transform: `translateY(${hourOffset}px)` }">{{hours}}</view>
			<view class="time-separator">:</view>
			<view class="time-item" :style="{ transform: `translateY(${minuteOffset}px)` }">{{minutes}}</view>
			<view class="time-separator">:</view>
			<view class="time-item" :style="{ transform: `translateY(${secondOffset}px)` }">{{seconds}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'DigitalClock',
		props: {
			color: {
				type: String,
				default: "#333333"
			}
		},
		data() {
			return {
				hours: "00",
				minutes: "00",
				seconds: "00",
				hourOffset: 0,
				minuteOffset: 0,
				secondOffset: 0,
				timer: null

			}
		},
		mounted() {
			this.updateTime();
			this.timer = setInterval(this.updateTime, 1000);
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		methods: {
			updateTime() {
				const now = new Date();
				const newHours = String(now.getHours()).padStart(2, "0");
				const newMinutes = String(now.getMinutes()).padStart(2, "0");
				const newSeconds = String(now.getSeconds()).padStart(2, "0");

				// 更新秒数
				if (this.seconds !== newSeconds) {
					this.secondOffset = -30;
					setTimeout(() => {
						this.seconds = newSeconds;
						this.secondOffset = 30;
						setTimeout(() => {
							this.secondOffset = 0;
						}, 50);
					}, 50);
				}

				// 更新分钟
				if (this.minutes !== newMinutes) {
					this.minuteOffset = -30;
					setTimeout(() => {
						this.minutes = newMinutes;
						this.minuteOffset = 30;
						setTimeout(() => {
							this.minuteOffset = 0;
						}, 50);
					}, 50);
				}

				// 更新小时
				if (this.hours !== newHours) {
					this.hourOffset = -30;
					setTimeout(() => {
						this.hours = newHours;
						this.hourOffset = 30;
						setTimeout(() => {
							this.hourOffset = 0;
						}, 50);
					}, 50);
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.digital-clock {
		// width: 300rpx;
		// height: 60rpx;
		background: #ffffff;
		border-radius: 8rpx;
		// margin: 20rpx auto;
		overflow: hidden;
		position: relative;
		color: #333333;
		

		.time-container {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			.time-item {
				font-size: 36rpx;
				font-weight: bold;
				font-family: monospace;
				transition: transform 0.1s ease;
				position: relative;
				width: 40rpx;
				text-align: center;
			}

			.time-separator {

				font-size: 36rpx;
				font-weight: bold;
				margin: 0 4rpx;
			}
		}
	}
</style>